import React, { useEffect, useState } from 'react'
import { Col, Row, Radio, Space, Button } from 'antd';
import request, { baseUrl } from '../../utils/request'

import { useNavigate } from 'react-router-dom'
import { CaretRightOutlined, } from '@ant-design/icons'

function Conponent(props) {
    // const tag = props.class
    // console.log(props);
    const [size, setSize] = useState('large');
    const tags = props.tag.class
    const [newlist, setNewlist] = useState([])
    const [rightlist,setRightlist] = useState([])
    const navigate = useNavigate()
    const [tabPosition, setTabPosition] = useState('left');
    const changeTabPosition = (e) => {
        setTabPosition(e.target.value);
    };
    useEffect(() => {
        request.get('/list/show/category/' + tags, {
            params: {
                size: 12,
            }
        }).then(({
            data
        }) => {
            setNewlist(data.movielist.data)
        })
        request.get('/list/show/category/' + tags, {
            params: {
                size: 12,
                page:2
            }
        }).then(({
            data
        }) => {
            setRightlist(data.movielist.data)     
        })

    }, [])


    return (
        <div>
            <h2 className='abcd'>{tags}
                <span className='sss'> {tags}.周榜</span>
                <span className='ss'>
                    <Button shape="round" size={size} >
                        更多{tags}》
                    </Button>
                </span>
            </h2>


            <Row>
                <Col span={6} push={18}>

                    {/* 动作模块的右边 */}

                    {/* <h1>动作.周榜</h1> */}
                    <Row>{
                        rightlist.map((item, idx) => {
                            return (
                                <div key={item.movieID } onClick={() => {
                                    navigate(`/detail/?movieID=${item.movieID}`)
                                }} src={baseUrl + '/imgs/' + item.imgNames}>
                                    <Col span={24} key={item.movieID}>
                                        <Radio.Group value={tabPosition} onChange={changeTabPosition}>
                                            <Radio.Button value="right" >
                                                <Space>

                                                    <div >
                                                        <CaretRightOutlined className={'sanjiao' + idx}
                                                            style={{ fontSize: '95px', marginLeft: '-81px', marginTop: '-15px' }}>
                                                        </CaretRightOutlined>

                                                        <span className='aab'>{idx + 1}</span>
                                                    </div>

                                                    <div className='ab'>{item.title}</div>

                                                </Space>
                                            </Radio.Button>
                                        </Radio.Group>


                                    </Col>
                                </div>

                            )
                        })
                    }

                    </Row>

                </Col>

                {/* 动作模块的左边 */}
                <Col span={18} pull={6}>
                    <Row justify="space-evenly">{
                        newlist.map(item => {
                            return <Col span={6} key={item.movieID}>
                                <div className='zzz'>
                                    <div className='qqqq'>
                                        <div className='divspan'>
                                            <span className='divspanK' >{item.douban}</span>
                                            <span className='divspanK' >{item.videoClass}</span>
                                            <span className='divspanK' >{item.startTime}</span>
                                        </div>
                                        <img onClick={() => {
                                            navigate(`/detail/?movieID=${item.movieID}`)
                                        }} src={baseUrl + '/imgs/' + item.imgNames} width="80%" className='qqq' /></div>
                                </div>

                                <div className='abc'>{item.title}</div></Col>
                        })
                    }
                    </Row>
                </Col>
            </Row>

        </div>
    )
}

export default Conponent